3
3
.
.
1
1
.
.
1
1
C
C
r
r
e
e
a
a
t
t
e
e
C
C
u
u
s
s
t
t
o
o
m
m
V
V
i
i
e
e
w
w
I
I
n
n
f
f
o
o
[
[
R
R
]
]
This tutorial shows how to create a custom View.
This is done by creating custom Composable Function (since in Compose these are used to represent Views).
Composable Function can have any number of parameters (including no parameters at all).
Once you create Composable Function you can use it like any other View.
C
C
o
o
m
m
p
p
o
o
s
s
i
i
t
t
e
e
V
V
i
i
e
e
w
w
In this example we create Composable Function that implements View with two Text Views for displaying person's name.
MainActivity.kt
package com.example.testcompose
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.Column
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.setContent
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Greeting(firstName = "John", lastName = "Carpenter")
}
}
}
@Composable
fun Greeting(firstName: String, lastName: String) {
Column {
Text("First Name: $firstName")
Text("Last Name: $lastName")
}
}
Output
C
C
u
u
s
s
t
t
o
o
m
m
T
T
e
e
x
x
t
t
V
V
i
i
e
e
w
w
Instead of applying the same Parameters/Modifiers to each Text View in a Column, simply create Custom Text View with
these Parameters/Modifiers and then use that one to populate Column.
MainActivity.kt
package com.example.testcompose
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Text
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.unit.dp
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.Start
) {
customText("First" )
customText("Second")
customText("Third" )
}
}
}
}
@Composable
fun customText(text : String) {
Text(text, Modifier.padding(10.dp).border(2.dp, Color.Red).padding(10.dp))
}
Output
